<template>
  <div class="ud-form">
    <div class="ud-form-desc">
      <div class="title">双列表单（同步）样例</div>
      <div class="description">使用了element的layout布局，包含了form表单中的所有控件，此样例是同步上传，点击提交时，upload上传列表会放到form表单中一块上传到服务器</div>
    </div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      :inline-message="true"
      label-width="200px"
      class="ud-form-content"
      :label-position="labelPosition"
    >

      <!-- 普通输入框和必须输入框 -->
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="普通输入框" prop="notnecessaryItem">
            <el-input
              v-model="form.notnecessaryItem"
              clearable
              :placeholder="tips1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="必要输入框" prop="necessaryItem">
            <el-input
              v-model="form.necessaryItem"
              clearable
              :placeholder="tips1"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 密码输入框和文本域输入框 -->
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="密码输入框" prop="password">
            <el-input
              v-model="form.password"
              type="password"
              :placeholder="tips2"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="数字输入框" prop="mustnum">
            <!-- oninput设置了输入框只能输入数字和小数点，并且小数点后保留两位；同时解决type="number"在IE下不兼容，还可以输入字母或者其他字符的bug -->
            <el-input
              v-model="form.mustnum"
              :placeholder="tips1"
              oninput="value = value.toString().match(/^\d+(?:\.\d{0,2})?/)"
              type="number"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 带icon的输入框组（包含前，后，属性插入icon，slot插入icon...） -->
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="属性引入icon输入框" prop="iconInput1">
            <el-input
              v-model="form.iconInput1"
              :placeholder="tips1"
              prefix-icon="el-icon-search"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="属性引入icon输入框" prop="iconInput2">
            <el-input
              v-model="form.iconInput2"
              :placeholder="tips1"
              suffix-icon="el-icon-search"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="solt引入icon输入框" prop="iconInput3">
            <el-input v-model="form.iconInput3" :placeholder="tips1">
              <i slot="prefix" class="el-input__icon el-icon-search" />
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="solt引入icon输入框" prop="iconInput4">
            <el-input v-model="form.iconInput4" :placeholder="tips1">
              <i slot="suffix" class="el-input__icon el-icon-search" />
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 组合框（可选可输入）和单选下拉菜单（一级） -->
      <el-row>
        <!-- 组合框 -->
        <el-col :span="8" :offset="2">
          <el-form-item label="组合框" prop="combobox">
            <el-autocomplete
              v-model="form.combobox"
              clearable
              :fetch-suggestions="querySearch"
              class="unified-style"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-col>
        <!-- 可清空单选下拉菜单 -->
        <el-col :span="8" :offset="2">
          <el-form-item label="下拉列表(单选)" prop="selectOne">
            <el-select
              v-model="form.selectOne"
              :placeholder="tips3"
              clearable
              class="unified-style"
            >
              <el-option
                v-for="item in optionsSelect"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 多选下拉框、时间选择框，日期选择框，日期时间选择框 -->
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="大写状态提示框" prop="capsValue">
            <UdCapsLock :form-value="this.form.capsValue" @getCapsLockVal="getCapsLockVal" />
          </el-form-item>

        </el-col>
        <!-- 日期选择（注：type属性可设置year/month/week/datetime/datetimerange/daterange,
        分别表示年/月/日/日期+时间/从一个日期时间点-下一个日期时间点/从一个日期-另一个日期） -->
        <el-col :span="8" :offset="2">
          <el-form-item label="选择日期" prop="date">
            <el-date-picker
              v-model="form.date"
              type="date"
              placeholder="请选择日期"
              class="unified-style"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!-- 日期和时间选择 -->
        <el-col :span="8" :offset="2">
          <el-form-item label="选择日期和时间" prop="dateAndTime">
            <el-date-picker
              v-model="form.dateAndTime"
              type="datetime"
              placeholder="选择日期和时间"
              class="unified-style"
            />
          </el-form-item>
        </el-col>
        <!-- 时间选择 -->
        <el-col :span="8" :offset="2">
          <el-form-item label="选择时间" prop="time">
            <el-time-select
              v-model="form.time"
              :picker-options="timeOptions"
              class="unified-style"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 星级和开关 -->
      <el-row>
        <!-- 星级 -->
        <el-col :span="8" :offset="2">
          <el-form-item label="请选择星级" prop="rateValue">
            <el-rate
              v-model="form.rateValue"
            />
          </el-form-item>
        </el-col>
        <!-- 开关 -->
        <el-col :span="8" :offset="2">
          <el-form-item label="开关" prop="switchValue">
            <el-switch
              v-model="form.switchValue"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 单选和多选(checkbox) -->
      <el-row>
        <!-- 多选 -->
        <el-col :span="8" :offset="2">
          <el-form-item label="多选" prop="checklist">
            <el-checkbox-group v-model="form.checklist">
              <el-checkbox label="A" />
              <el-checkbox label="B" />
              <el-checkbox label="C" />
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <!-- 单选 -->
        <el-col :span="8" :offset="2">
          <el-form-item label="单选" prop="radio">
            <el-radio v-model="form.radio" label="1">A</el-radio>
            <el-radio v-model="form.radio" label="2">B</el-radio>
            <el-radio v-model="form.radio" label="3">C</el-radio>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 联想输入框和可搜索创建下拉列表(多选) -->
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="联想输入框" prop="prvns">
            <UdAutoComplete
              :data-list="prvnsList"
              class="prvns"
              :prompt-content="promptContent"
              :empty-array="this.form.prvns"
              @getSelectedData="getSelectedData"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <!-- 下拉列表多选 -->
          <el-form-item label="可搜索下拉列表(多选)" prop="selectMore">
            <el-select
              v-model="form.selectMore"
              multiple
              filterable
              allow-create
              :placeholder="tips3"
              class="unified-style"
            >
              <el-option
                v-for="item in optionsSelect"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 复合型输入框（前，后，前后）通过slot实现 -->
      <el-row>
        <el-col :span="18" :offset="2">
          <el-form-item label="复合型输入框（前）" prop="compositeInput1">
            <el-input v-model="form.compositeInput1" :placeholder="tips1">
              <template slot="prepend">http://</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="2">
          <el-form-item label="复合型输入框（后）" prop="compositeInput2">
            <el-input v-model="form.compositeInput2" :placeholder="tips1">
              <template slot="append">.com</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="2">
          <el-form-item label="复合型输入框（前后）" prop="compositeInput3">
            <el-input v-model="form.compositeInput3" :placeholder="tips1">
              <template slot="prepend">http://</template>
              <template slot="append">.com</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="2">
          <el-form-item label="人员选择框">
            <UdStaffSelect
              v-model="form.personSelected"
              class="staff-select"
              :lazy="false"
              :data="allLoadDataSource === 1 ? allLoadData1 : allLoadData2"
            >
              <div slot="dataSource" class="data-source-wrap">
                <el-button
                  type="primary"
                  @click="allLoadDataSource = 1"
                >数据源1</el-button>
                <el-button
                  type="primary"
                  @click="allLoadDataSource = 2"
                >数据源2</el-button>
              </div>
            </UdStaffSelect>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="2">
          <el-form-item label="输入文本域" prop="textareaValue">
            <el-input
              v-model="form.textareaValue"
              :rows="2"
              resize="none"
              type="textarea"
              :placeholder="tips1"
              :autosize="{ minRows: 2, maxRows: 4}"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 文件上传 -->
      <el-row>
        <el-col :span="18" :offset="2">
          <el-form-item label="文件上传">
            <!-- 向upload添加accept=".txt,.wps",用来限制上传格式 -->
            <el-upload
              ref="upload"
              action="upload/uploadform"
              class="uploadstyle"
              multiple
              :on-change="filechange"
              :on-remove="fileremove"
              :file-list="form.filelist"
              :auto-upload="autoUpload"
              :on-error="errorMessage"
              :on-success="successMessage"
              :before-upload="onBeforeUpload"
            >
              <el-button>选择...</el-button>
              <span style="color:#f15a4a">只能选择.wps文件</span>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="2">
          <el-button type="primary" class="ud-form-button" @click="onSubmit(form)">确定</el-button>
          <el-button class="ud-form-button" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { UdStaffSelect, UdCapsLock, UdAutoComplete, UdNotice } from 'udesk-vue'
import { uploadform } from '@/api/upload_demo_for_syncForm{{timestamp}}' // 上传form表单——shuhh
import { getStaffSelectData } from '@/api/staffSelect_demo_for_syncForm{{timestamp}}'

export default {
  name: 'SyncForm',
  components: {
    UdStaffSelect,
    UdCapsLock,
    UdAutoComplete
  },
  data() {
    return {
      wind: '',
      allLoadDataSource: 1, // 默认dataSource是1
      dataSource: 1,
      allLoadData1: [], // 全量加载数据
      allLoadData2: [],
      tips1: '请输入内容',
      tips2: '请输入密码',
      tips3: '请选择',
      labelPosition: 'right', // label居左或居右
      capsKey: null, // 大小写标识
      showOrHidden: false, // 大小写提示框提示tip框显示与否
      mouseHandle: true, // 取消大小写框的mouseenter和mouseleave效果
      autoUpload: false, // boolean值，为true时，选中文件就会上传，false，选中不会立即上传
      notifyPromise: Promise.resolve(), // 解决notify重叠问题所需
      promptContent: '请输入省份名称或拼音', // 向自动提示框组件传递提示信息
      restaurants: [
        { 'value': '男' },
        { 'value': '女' },
        { 'value': '保密' }
      ],
      prvnsList: [
        { value: '选项1', label: '陕西省', pinyin: 'shanxisheng' },
        { value: '选项2', label: '北京市', pinyin: 'beijingshi' },
        { value: '选项3', label: '天津市', pinyin: 'tianjinshi' },
        { value: '选项4', label: '河北省', pinyin: 'hebeisheng' },
        { value: '选项5', label: '山西省', pinyin: 'shanxisheng' },
        { value: '选项6', label: '内蒙古自治区', pinyin: 'neimengguzizhiqu' },
        { value: '选项7', label: '辽宁省', pinyin: 'liaoningsheng' },
        { value: '选项8', label: '吉林省', pinyin: 'jilinsheng' },
        { value: '选项9', label: '黑龙江省', pinyin: 'heilongjiangsheng' },
        { value: '选项10', label: '上海市', pinyin: 'shanghaishi' },
        { value: '选项11', label: '江苏省', pinyin: 'jiangsusheng' },
        { value: '选项12', label: '浙江省', pinyin: 'zhejiangsheng' },
        { value: '选项13', label: '安徽省', pinyin: 'anhuisheng' },
        { value: '选项14', label: '福建省', pinyin: 'fujiansheng' },
        { value: '选项15', label: '江西省', pinyin: 'jiangxisheng' },
        { value: '选项16', label: '山东省', pinyin: 'shandongsheng' },
        { value: '选项17', label: '河南省', pinyin: 'henansheng' },
        { value: '选项18', label: '湖北省', pinyin: 'hubeisheng' },
        { value: '选项19', label: '湖南省', pinyin: 'hunansheng' },
        { value: '选项20', label: '广东省', pinyin: 'guangdongsheng' },
        { value: '选项21', label: '广西壮族自治区', pinyin: 'guangxizhuangzuzizhiqu' },
        { value: '选项22', label: '海南省', pinyin: 'hainansheng' },
        { value: '选项23', label: '四川省', pinyin: 'sichuansheng' },
        { value: '选项24', label: '贵州省', pinyin: 'guizhousheng' },
        { value: '选项25', label: '云南省', pinyin: 'yunnansheng' },
        { value: '选项26', label: '西藏自治区', pinyin: 'xizangzizhiqu' },
        { value: '选项27', label: '甘肃省', pinyin: 'gansusheng' },
        { value: '选项28', label: '青海省', pinyin: 'qinghaisheng' },
        { value: '选项29', label: '宁夏回族自治区', pinyin: 'ningxiahuizuzizhiqu' },
        { value: '选项30', label: '新疆维吾尔自治区', pinyin: 'xinjiangweiwuerzuzizhiqu' },
        { value: '选项31', label: '重庆市', pinyin: 'chongqingshi' }
      ],
      // 下拉框遍历对象
      optionsSelect: [
        { value: '选项1', label: '苹果' },
        { value: '选项2', label: '香蕉' },
        { value: '选项3', label: '橘子' },
        { value: '选项4', label: '凤梨' }
      ],
      // 时间选择器时间设置
      timeOptions: {
        start: '00:00', // 开始
        step: '00:30', // 间隔
        end: '23:59' // 结束
      },
      form: {
        notnecessaryItem: '', // 非必填
        necessaryItem: '', // 必填
        password: '', // 密码,必填
        textareaValue: '', // 文本域内容
        iconInput1: '', // 引入icon的输入框value(iconInput1/2/3/4)
        iconInput2: '',
        iconInput3: '',
        iconInput4: '',
        compositeInput1: '', // 复合型输入框value(compositeInput1/2/3)
        compositeInput2: '',
        compositeInput3: '',
        mustnum: 50, // 数字输入框value
        combobox: '', // 组合框value
        selectOne: '选项1', // 下拉选择框value(单选),长度为1的
        selectMore: [], // 下拉多选框value（多选）
        time: '', // 时间选择--时间
        date: '', // 日期选择--日期
        dateAndTime: '', // 日期和时间选择--日期+时间
        rateValue: null, // 星级选择(number类型)
        switchValue: true, // 开关选择
        radio: '1', // 单选，默认选中label=1
        checklist: ['A'], // 复选框多选，默认选中label=A
        capsValue: '', // 大写状态提示框value
        prvns: [], // 联想输入框内容
        personSelected: [], // 人员选择机构选中的人员列表
        filelist: [] // 上传文件列表
      },
      rules: {
        // 必填项，验证
        necessaryItem: [
          {
            required: true,
            message: '内容不能为空!',
            trigger: 'blur'
          }
        ],
        // 大小写框value
        capsValue: [
          {
            required: true,
            message: '内容不能为空!',
            trigger: 'blur'
          }
        ],
        // 密码，验证
        password: [
          {
            required: true,
            message: '内容不能为空!',
            trigger: 'blur'
          },
          {
            min: 5,
            max: 8,
            message: '密码长度为5到8!'
          }
        ],
        // icon输入框，验证
        iconInput1: [
          {
            required: true,
            message: '内容不能为空!',
            trigger: 'blur'
          }
        ],
        // 下拉菜单单选验证
        selectOne: [
          {
            required: true,
            message: '内容不能为空!',
            trigger: ['blur', 'change']
          }
        ],
        // 日期和时间
        dateAndTime: [
          {
            required: true,
            message: '内容不能为空!',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  async mounted() {
    this.allLoadData1 = await this.getAllRemoteStaffData1()
    this.allLoadData2 = await this.getAllRemoteStaffData2()
  },
  methods: {
    // 组合框方法
    querySearch(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants : restaurants
      cb(results)
    },
    // 获取联想输入框val
    getSelectedData(selectedData) {
      this.form.prvns = selectedData
    },
    // 获取大写输入框val
    getCapsLockVal(val) {
      this.form.capsValue = val
    },
    // 当选中选择文件后，将选中的文件列表添加到form中的filelist
    filechange(file, filelist) {
      // 获取文件后缀名
      const filename = file.name
      const extensionStr = this.getExtensionFileName(filename)
      if (extensionStr !== 'wps') {
        const msg = filename + '错误：不支持.' + extensionStr + '格式的文件,只支持.wps文件'
        this.notify(msg) // 使用重构的提示信息框，解决信息框重叠问题
        // 利用对象转数组的隐式转换，先存储在表单中的filelist数组中，在使用pop删除刚传进去的最后一个对象
        // 解决this.form.filelist = filelist时，报错Expected Array,got Object
        this.form.filelist = filelist
        this.form.filelist.pop()
      } else {
        this.form.filelist = filelist
      }
    },
    // 移除文件时，提示一个文件移除成功
    fileremove(file, filelist) {
      this.form.filelist = filelist
      UdNotice.success({
        title: '成功',
        message: '一个文件移除成功',
        dangerouslyUseHTMLString: true,
        duration: 5000
      })
    },
    // 全量加载
    async getAllRemoteStaffData1() { // 数据1 tree数据
      return await getStaffSelectData('/api/allData1').then(res => {
        return res.data || []
      })
    },
    async getAllRemoteStaffData2(node) { // 数据2 tree数据
      return await getStaffSelectData('/api/allData2').then(res => {
        return res.data || []
      })
    },
    // 特别注意：
    // 上传成功回调successMessage、errorMessage、onBeforeUpload分别是成功，失败，上传前检验处理等操作，可自行定义
    successMessage() {
      // UdNotice.success({
      //   title:"成功",
      //   message:"文件上传成功",
      //   dangerouslyUseHTMLString:true,
      //   duration:5000
      // })
    },
    // 上传失败回调
    errorMessage() {
      // UdNotice.error({
      //   title:"错误",
      //   message:"文件上传失败",
      //   dangerouslyUseHTMLString:true,
      //   duration:5000
      // })
    },
    // 上传之前的检验
    onBeforeUpload(filelist) {

    },
    // 重置form,清空form和上传文件列表
    reset() {
      this.$refs.form.resetFields()
      this.form.filelist = []
      this.form.personSelected = []
    },
    // 提交form
    onSubmit(form) {
      // 验证表单
      this.$refs.form.validate(valid => {
        if (valid) {
          // 请求接口数据，上传数据
          uploadform(this.form).then((res) => {
            console.log(res)
            // 如果上传成功，并返回信息中success为true
            if (res.success) {
              UdNotice.success({
                title: '成功',
                message: '提交表单成功',
                dangerouslyUseHTMLString: true,
                duration: 5000
              })
              // 一般同步表单，提交表单之后，表单会清空并跳转到其他页面，
              // 一种方法是手动使用reset清空reset,
              // 另一种是在route.js中synForm路由中的noCache设置为true，让其不缓存
              this.reset()
              // 上传成功之后，跳转到相应页面，此处跳转到首页
              this.$router.push('/')
            } else {
              // 特别说明：因为request对失败进行了处理，会弹出失败的提示框，故此处失败提示框注释
              // 上传失败，提示框，不跳转
              // UdNotice.error({
              //   title:"错误",
              //   message:"提交表单失败",
              //   dangerouslyUseHTMLString:true,
              //   duration:5000
              // })
            }
          })
        } else {
          // 表单检验不通过提示框
          UdNotice.error({
            title: '错误',
            message: '提交检验错误，请检查填写内容！',
            dangerouslyUseHTMLString: true,
            duration: 5000
          })
        }
      })
    },
    // 获取文件后缀名方法
    getExtensionFileName(filename) {
      const extensionArr = filename.split('.')
      return extensionArr[extensionArr.length - 1]
    },
    // 解决notify提示框重叠问题
    notify(msg) {
      this.notifyPromise = this.notifyPromise.then(this.$nextTick).then(() => {
        UdNotice.error({
          title: '错误',
          message: msg,
          dangerouslyUseHTMLString: true,
          duration: 5000
        })
      })
    }
  }
}
</script>

<style lang="scss">
.fontSize12 .ud-form .el-form-item__error--inline {
    top: -2px;
  }
.fontSize15 .ud-form .el-form-item__error--inline,
.fontSize18 .ud-form .el-form-item__error--inline {
    top: -5px;
  }
.ud-form{
  font-weight:500;
  .ud-form-desc{
      margin:0 auto;
      width: 100%;
      height: 80px;
      text-align: center;
      .title{
          margin: 20px 0 10px;
          color: #555;
          font-weight: 600;
      }
      .description{
          padding: 0px 0px 10px;
          color: #999;
      }
  }
  .ud-form-content{
    .el-form-item{
      //select多选选择之后的样式，解决在IE下选项多超过input框的宽度时不换行的Bug
      .el-select__tags{
        width: 100%;
        display: block;
      }
      //select可搜索时，输入的搜索文字的样式,如果不设置width，在ie下会出现很窄看不见文字的bug
      .el-select__input {
        width: 55px !important;
      }
      //设置input宽度
      .unified-style{
        width:100%;
      }
      .el-rate {
        line-height: 1.7;
      }
      .el-switch {
        margin-bottom: 5px;
      }
      // 为input三种不同规格和textarea、error设置继承父级字体，改变全局字体大小
      .el-input--small,.el-input--medium,.el-input--mini,.el-textarea,.el-form-item__error,.el-tag{
       font-weight: 500;
      }
      .prvns{
        width: 100%;
      }
      input[type="number"]{
        -moz-appearance: textfield;
      }
    }
    .el-form-item__error {
      background-color: #fdedeb;
      padding: 5px 15px;
    }
    .el-form-item__error--inline {
      margin-left: 0;
    }
    .el-form-item__label{
      color: #333;
      font-weight: 500;
    }
    .data-source-wrap {
      margin-bottom: 12px;
    }
    .staff-select {
      width: 100%;
    }
    .ud-form-button{
      float:right;
      margin-right:10px;
      font-weight: 500;
    }
  }
}
.uploadstyle{
  border: 1px solid #dcdfe6;
  background-color: #f5f7fa;
  padding: 5px;
}
.el-upload-list {
  .el-upload-list__item {
    margin-top: 0;
    padding: 3px 0;
    border-top: 1px solid #ededed;
    .el-icon-close {
      top: 9px;
    }
  }
  li:nth-of-type(odd) {
    background-color: #fff;
  }
}
</style>
